import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Modal, Select } from 'antd';
import { withClick } from '@/utils/hoc';

const FormItem = Form.Item;
const SelectOption = Select.Option;

// 表单单排格式
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

class UserModal extends Component {

  static defaultProps = {
    title: '添加用户',
    record: {username: '', password: '', email: '', phone: '', role: 'admin'},
  }

  constructor(props) {
    super(props);
    this.state = {visible: false};
  }

  handleOpenClick = () => {
    this.setState({
      visible: true,
    });
  };
  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };
  handleOk = () => {
    // form校验
    this.props.form.validateFields((err, values) => {
      if (!err) {
        // 请求
        this.props.onOk(values).then(response => {
          if (response.state === 0) {
            // 关闭弹窗
            this.handleCancel();
          }
        });
      }
    });
  };
  render() {
    const { visible } = this.state;
    const { children, addLoading, title, roles } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { username, password, email, phone, role } = this.props.record;
    return (
      <>
        {withClick(children, this.handleOpenClick)}
        <Modal
          title={title}
          visible={visible}
          centered={true}
          maskClosable={false}
          onCancel={this.handleCancel}
          onOk={this.handleOk}
          confirmLoading={addLoading}
        >
          <Form>
            <FormItem label='用户名' {...formItemLayout}>
              {getFieldDecorator('username', {
                rules: [
                  {
                    required: true,
                    message: '用户名不能为空!',
                  },
                ],
                initialValue: username,
              })(<Input placeholder='用户名' autocomplete='off' readOnly={username!==''}/>)}
            </FormItem>
            {username===''?
              <FormItem label='密码' {...formItemLayout}>
                {getFieldDecorator('password', {
                  rules: [
                    {
                      required: true,
                      message: '密码不能为空!',
                    },
                  ],
                  initialValue: password,
                })(<Input type='password' placeholder='Password' autocomplete='off'/>)}
              </FormItem>:''
            }
            <FormItem label='Email' {...formItemLayout}>
              {getFieldDecorator('email', {
                initialValue: email,
              })(<Input placeholder='Email' autocomplete='off'/>)}
            </FormItem>
            <FormItem label='电话' {...formItemLayout}>
              {getFieldDecorator('phone', {
                initialValue: phone,
              })(<Input placeholder='电话' autocomplete='off'/>)}
            </FormItem>
            <FormItem label='角色' {...formItemLayout}>
              {getFieldDecorator('role', {
                  initialValue: role,
                })(<Select autocomplete='off' disabled={title=='修改用户'}>
                    {
                      roles.map(role=><SelectOption key={role} value={role}>{role}</SelectOption>)
                    }
                  </Select>)}
            </FormItem>
          </Form>
        </Modal>
      </>
    );
  }
}

UserModal.propTypes = {
  title: PropTypes.string,
  record: PropTypes.object
};

export default Form.create()(UserModal);
